<template>
    <ul class="tags">
      <li
        v-for="(item, index) in tagList"
        @click="select(index)"
        :class="{ active: item.selected }"
        :key="index"
      >
        <a href="" @click.prevent>{{ item.typeName }}</a>
      </li>
    </ul>
  </template>

<script>
import { getMovieType } from '@/api/movie'
export default {
  name: 'VueIndex',

  data () {
    return {
      index: 0, // 选中的类型
      tagList: []
    }
  },

  mounted () {
    getMovieType().then(res => {
      const all = {
        id: 0,
        name: '全部',
        selected: true
      }
      const data = res.data
      //把all添加到数组的第一个
      data.unshift(all)
      this.tagList = data.map((item, index) => {
        return {
          id: item.id,
          typeName: item.id === 0 ? '全部' : item.name,
          selected: index === 0
        }
      })
    })
  },

  methods: {
    select (index) {
      // console.log(index)
      this.$bus.$emit('getType', index)
      this.tagList.map((a) => (a.selected = false))
      this.tagList[index].selected = true
    }
  }
}
</script>

  <style lang="scss" scoped>
  .tags {
    margin-left: 40px !important;
  }
  .tags li {
    border-radius: 14px;
    padding: 3px 9px;
    display: inline-block;
    margin-left: 12px;
  }
  .tags li.active {
    background: #f34d41;
    color: #fff;
  }
  .tags li.active a {
    color: #fff;
  }

  .tags li a {
    color: #333;
    font-size: 14px;
  }
  a {
    text-decoration: none;
  }
  </style>
